<template>
    <div>
        <el-row>
            <el-col :span="4"><el-button type="primary" plain>添加患者</el-button></el-col>
            <el-col :span="4"><el-input v-model="input" placeholder="姓名"  prefix-icon="el-icon-search"></el-input></el-col>
            <el-col :span="4"><el-button type="primary" plain>查询</el-button></el-col>
         </el-row>
           
            <el-table :data="tableData" border style="width: 100%">
             <el-table-column align="center" 
                prop="name"
                label="姓名"
                width="80">
            </el-table-column>
            <el-table-column align="center"
                prop="idcard"
                label="身份证号"
                width="180">
            </el-table-column>
              <el-table-column align="center"
                prop="gender"
                label="性别"
                width="60">
            </el-table-column>
            <el-table-column
                width=""
                prop="address"
                label="地址">
            </el-table-column>
             <el-table-column align="center" 
                prop="date"
                label="日期"
                width="180">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.date }}</span>
            </template>
            </el-table-column>
            <el-table-column
                prop="where"
                label="感染来源" 
                width="120"
                align="center">
            </el-table-column>
             <el-table-column align="center" width="300"
                prop="do"
                label="操作">
                <el-button  plain  size="mini" @click="showById">编辑</el-button>
                <el-button type="primary" plain  size="mini">检测记录</el-button>
                <el-button type="primary" plain size="mini" @click="showCureDialog">治愈</el-button>
            </el-table-column>
         
         
        </el-table>
        <div class="block">
    
            <!-- <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage3"
            :page-size="100"
            layout="prev, pager, next, jumper"
            :total="1000">
            </el-pagination> -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
            </el-pagination>

                <el-dialog title="治愈" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                    <el-form-item label="治愈时间" :label-width="formLabelWidth">
                        <el-date-picker
                                v-model="form.value"
                                type="date"
                                placeholder="请选择时间">
                                </el-date-picker>          
                    </el-form-item>

                    <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.desc" rows="4" max="200"></el-input>
                     </el-form-item>
        <!-- <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.desc" rows="4" max="200"></el-input>
                </el-form-item> -->

        <!-- <el-select v-model="form.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
        </el-select> -->
        
                    </el-form>
                     <div slot="footer" class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                 </el-dialog>
        </div>

    </div>
</template>

<script>
// 封装axious代码
import request from '@/utils/request'
export default {
  data() {
    return {
        input: '',
        tableData: null,
        currentPage1: 5,
        currentPage2: 5,
        currentPage3: 5,
        currentPage4: 4,  
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
          formLabelWidth: '120px'
    }
  },
  created(){
      this.fetchData()
    //   this.alter()
  },
  methods:{
      fetchData(){
          request({
              url:'../patient_list.json',
              method:'get'
          }).then(response => {
              this.tableData = response.data
          })
      },
        //   alter(){
        //       request({
        //       url:'../alter/index.vue',
        //       method:'get'
        //   }).then(response => {
        //       this.alterData = response.data
        //   })
        //   },
       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      showById(){
          this.$router.push("/addhuanzhe/index")
      },
      showCureDialog(){
          this.dialogFormVisible = true
      }
  }
}
</script>